<template>
  <view class="home">
    <cu-custom bgColor="bgcolorfff">
      <block slot="content"><view class="toptext">CIFF新物节</view></block>
    </cu-custom>
    <!-- 顶部搜索框 -->
    <view class="contain"
      ><search
        v-model="search"
        :disabled="true"
        url="/pages/search/search"
      ></search
    ></view>

    <!-- 轮播图 -->
    <view class="container"
      ><SwiperCard :swiperList="swiperList" @swiperDot="swiperDot"></SwiperCard
    ></view>

    <!-- 轮播图计数 -->
    <view class="dot flex-c"
      ><view
        v-for="(item, index) in swiperList.length"
        :key="index"
        :class="swiperCurrent === index ? 'active' : ''"
      ></view
    ></view>

    <!-- 瀑布流卡片 -->
    <view class="waterfall_box">
      <waterfall :value="list" ref="waterfall" :column="2" :gutter="0">
        <template v-slot="{ item }">
          <view class="waterfall_box_cen">
            <Pullcard
              :boxBorder="false"
              :item="item"
              @likeCard="likeCard"
              :showLikeIcon="false"
              >自定义模块</Pullcard
            >
          </view>
        </template>
      </waterfall>
      <view class="tabKong"></view>
    </view>

    <Prompt v-model="authSwitch"></Prompt>
  </view>
</template>

<script>
import search from "../../conpoments/search";
import waterfall from "../../conpoments/waterfall";
import Pullcard from "../../conpoments/pullcard";
import SwiperCard from "../../conpoments/swiper";
import {
  likeArticle,
  delectLike,
  getBlockInfo,
  indexInfo,
} from "../../api/api"; //收藏和取消收藏
export default {
  onLoad(data) {
    console.log("onload");
    this.AllSC = uni.getStorageSync("safeArea");
  },
  onReady() {
    this.lastCursor = "";
    //  this.list = []
    this.getAllCardList(true);
  },
  onShow() {
    this.setTabBarIndex(0);
  },
  data() {
    return {
      lastCursor: "", //下一次请求的游标
      current: 0,
      swiperCurrent: 0,
      over: false,
      startY: "",
      list: [],
      AllSC: null,
      swiperList: [],
      stop: true,
      cardLength: 0, //当前页面卡片的总数量
      insertionData: {}, //要插入的数据
      insertionSum: 0,
    };
  },
  onShareTimeline(e) {
    return {
      title: "ciff",
      query: "",
    };
  },
  onPullDownRefresh() {
    this.lastCursor = "";
    this.over = false;
    this.list = [];
    this.cardLength = 0;
    this.insertionSum = 0;
    this.getAllCardList(true, true);
  },
  onReachBottom(e) {
    //触底加载
    if (this.stop == true) {
      if (!this.over) {
        this.getAllCardList();
      }
    }
  },
  methods: {
    refresh(list) {
      // 瀑布流数据初始化
      this.$refs.waterfall.refresh(list);
    },
    append(list) {
      //瀑布流数据追加
      this.$refs.waterfall.append(list);
    },
    swiperDot(e) {
      this.swiperCurrent = e;
    },
    async getAllCardList(first = false, refresh = false) {
      this.stop = false;
      if (first === true) {
        let block = await getBlockInfo();
        if (block[1].data.code == "000000") {
          //添加专题数据
          let { data } = block[1].data;
          this.insertionData = data;
        }
      }
      try {
        let res = await indexInfo(this.lastCursor);
        if (res[1].data.code === "000000") {
          this.stop = true;
          this.insertionSum = 0; //插入数据的数量重置
          let { feeds, lastCursor, banners } = res[1].data.data;

          if (feeds.length == 0 || res[1].data.data == null) {
            this.over = true;
            return;
          }
          this.lastCursor = lastCursor;
          //数据长度相加后，用于检测是否能插入数据了
          let futurelength = this.list.length + (feeds.length || 0);

          if (first === true) {
            if (refresh == true) {
              uni.stopPullDownRefresh(); //如果是刷新操作，则先调用关闭
            }
            this.swiperList = banners;

            //检查是否有数据可以插入
            if (this.searching(this.insertionData, futurelength)) {
              this.list.push(...this.insertData(feeds, futurelength));
            } else {
              this.list = feeds;
            }
          } else {
            if (this.searching(this.insertionData, futurelength)) {
              this.append(this.insertData(feeds, futurelength));
            } else {
              this.append(feeds);
            }
          }
          //插入检测结束后结束后增加数组长度
          this.cardLength = futurelength + this.insertionSum;
        }
        // this.$http({url:"/"})
      } catch (err) {}
    },
    async likeCard(index, item) {
      try {
        if (index == 1) {
          //收藏
          console.log(index);
          let res = await likeArticle(item.id);
          if (res[1].data.code === "000000") {
            uni.showToast({
              title: "收藏成功",
              duration: 800,
              icon: "none",
            });
          }
          console.log(res);
        } else if (index == 0) {
          //取消收藏
          let res2 = await delectLike(item.id);
        }
      } catch (error) {}
    },
    //检索是否有数据可以插入了
    searching(data, length) {
      if (data == null || data == "") {
        return false;
      } else {
        return Object.keys(data).some((v) => {
          if (length >= v) {
            return true;
          }
          //数组长度是否满足插入某个数据的条件
        });
      }
    },
    // 插入数据的方法
    insertData(feeds, futurelength) {
      let deletekey = [];

      console.log("插入前的长度", this.cardLength);
      for (const key in this.insertionData) {
        for (let index = 0; index < this.insertionData[key].length; index++) {
          const el = this.insertionData[key][index];
          if (Number(el.contentType) === 8 || Number(el.contentType) === 10) {
            if (futurelength >= key) {
              //新数据增加后的长度 是否大于当前插入的索引
              feeds.splice(Number(key) - this.cardLength, 0, el);
              this.insertionSum++; //计算本次插入多少个数据
              deletekey.push(key);
            }
          }
        }
      }
      //删除已经插入的key
      for (let index = 0; index < deletekey.length; index++) {
        const element = deletekey[index];
        this.$delete(this.insertionData, element);
      }
      return feeds;
    },
  },
  components: {
    search,
    waterfall,
    Pullcard,
    SwiperCard,
  },
};
</script>

<style lang="scss" scoped>
.bgcolorfff {
  background-color: #ffffff;
}

.home {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-overflow-scrolling: touch;
}

.top {
  width: 100%;
  display: flex;
  text-align: center;
  margin-top: 78rpx;
}

.toptext {
  width: 100%;
  display: inline-block;
  font-size: 36rpx !important;
  font-weight: bold;
  color: rgba(36, 36, 36, 1);
  text-align: center;
  font-family: "SourceHanSansCN-Heavy";
}

.contain {
  padding: 0 32rpx;
}

.container {
  position: relative;
  margin-top: 58rpx;
}

.dot {
  margin-top: 30rpx;

  > view {
    display: inline-block;
    width: 16rpx;
    height: 16rpx;
    border: 3rpx solid rgba(0, 0, 0, 1);
    opacity: 0.7;
    border-radius: 8rpx;
    margin-left: 14rpx;
    transition: width 1s;
  }

  .active {
    width: 64rpx;
    background: rgba(0, 0, 0, 1);
  }
}

.waterfall_box {
  margin-top: 12rpx;
  width: 100vw;

  .waterfall_box_cen {
    margin-top: 28rpx;
  }
}

.tabKong {
  height: 122rpx;
  width: 100%;
}
</style>
